<template>
  <section class="component trigger-list">
    
    <div style="text-align: right;" v-if="isEnable">
      <el-button @click="dialog.isOpenAddTrigger = true">新增触发器</el-button>
    </div>

    <data-box :data="triggerSet" @onPageChange="refresh" :height="300">
      <template slot="columns">
        <el-table-column prop="triggerName" label="触发器名称" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="cronExpression" label="CRON表达式" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="description" label="描述" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="triggerState" label="状态" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <span>{{getTriggerState(scope.row.triggerState)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="prevFireTime" label="上次执行时间" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="nextFireTime" label="下次执行时间" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(6)" v-if="isEnable">
          <template slot-scope="scope">
            <template  v-if="scope.row.triggerState === TriggerState.PAUSED">
              <el-button type="text" @click="resumeClick(scope.row)">恢复</el-button>
            </template>
            <el-button type="text" @click="pauseClick(scope.row)" v-else>暂停</el-button>
            <el-button type="text" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!-- 修改触发器 -->
    <el-dialog title="触发器" :close-on-click-modal="false" :visible.sync="dialog.isOpenAddTrigger" :show-close="false" @open="$nextTick(() => $refs['add-trigger'].refresh())" append-to-body>
      <add-trigger ref="add-trigger" :triggerData="rowData" @refreshData="refresh" @close="dialog.isOpenAddTrigger = false"></add-trigger>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop } from 'vue-property-decorator'
import DataForm from '~/components/common/data-form.vue';
import DataBox from '~/components/common/data-box.vue';
import { TaskService } from '~/service/service-manage/task.service'
import AddTrigger from '~/components/system-manage/task-manage/add-trigger.vue';
import { TriggerState, TRIGGER_STATE_LABEL, TaskGroup } from '~/components/system-manage/task-manage/job-trigger.config';

@Component({
  components: {
    DataForm,
    DataBox,
    AddTrigger
  }
})
export default class TriggerList extends Vue {
  @Dependencies(TaskService)
  private taskService: TaskService
  @Prop() 
  private rowData

  private TRIGGER_STATE_LABEL: any = TRIGGER_STATE_LABEL
  private TaskGroup: any = TaskGroup
  private TriggerState: any = TriggerState

  private triggerSet: any[] = []
  private dialog: any = {
    isOpenAddTrigger: false,
  }

  public refresh() {
    const params: any = {
      jobName: this.rowData.jobName,
      jobGroup: this.rowData.jobGroup,
    }
    this.taskService.getAllTriggerOfJob(params).subscribe(
      data => this.triggerSet = data || [],
      error => this.$message.error(error.msg)
    )
  }

  private get isEnable() {
    return this.rowData.jobGroup === this.TaskGroup.ENABLE
  }

  private getTriggerState(state) {
    const temp: any = this.TRIGGER_STATE_LABEL.find(x => x.state === state)
    return temp ? temp.label : ''
  }

  private deleteClick(row) {
    this.$confirm("删除操作不可恢复，确定删除？", "提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
        this.taskService.deleteTrigger(this.getParams(row)).subscribe(
          () => this.isSuccess(),
          ({ msg }) => this.$message.error(msg)
        )
      }
    ).catch(() => {})
  } 

  private pauseClick(row) {
    this.$confirm("确定暂停当前触发器？", "提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(
      () => {
        this.taskService.pauseTrigger(this.getParams(row)).subscribe(
          () => this.isSuccess(),
          ({ msg }) => this.$message.error(msg)
        )
      }
    ).catch(() => { })
  }

  private resumeClick(row) {
    this.$confirm("确定恢复当前触发器？", "提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(
      () => {
        this.taskService.resumeTrigger(this.getParams(row)).subscribe(
          () => this.isSuccess(),
          ({ msg }) => this.$message.error(msg)
        )
      }
    ).catch(() => { })
  }

  private getParams(row) {
    return {
      jobName: row.jobName,
      jobGroup: row.jobGroup,
      triggerName: row.triggerName,
    }
  }

  private isSuccess() {
    this.refresh()
    this.$message.success("操作成功")
  }
}

</script>
